<template>
    <view class="container lottery">
        <u-navbar 
            leftText="抽奖"
            @leftClick="appFinish"
            leftIconColor="#1D2129"
            bgColor="transparent">
			<view slot="right">
				<view class="right_btn" @click="isShowPop = true">
					<img src="@/static/image/edit.png" alt="" />
					<text>核销</text>
				</view>
			</view>
        </u-navbar>
		<view class="content">
			<view class="top_search">
				<u-search :showAction="true" actionText="确认" v-model.trim="params.name" 
				:animation="true" placeholder="请输入活动名称" borderColor="#979797" bgColor="#ffffff" @clear="search" @custom="search"></u-search>
			</view>
			<u-tabs class="custom_tab" :list="tabs" lineColor="#295EFF"
			:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" 
			:current="params.status" :itemStyle="itemStyle" :scrollable="false"  @change="changeTab">
			</u-tabs>
			<scroll-view @scrolltolower="scrolltolower" scroll-y scroll-with-animation class="content_scroll_view">
				<div class="content_scroll_view_space">

				</div>
				<view class="item_list" v-for="(item, index) in lotteryList" :key="index">
					<view class="item_top">
						<view class="item_status" :class="item.status === 2 ? 'finish': ''">{{ item.status | formatStatus }}</view>
						<view class="item_title ex">{{ item.name }}</view>
					</view>
					<view class="item_bottom">
						<view class="item">
							<view class="item_condition flex_width_42">
								<view class="item_condition_text">参与条件：</view>
								<view class="item_value ex">{{ item.type | cyType }}</view>
							</view>
							<view class="item_condition">
								<view class="item_condition_text">奖励数量：</view>
								<view class="item_value ex">{{ item.prizeNum }}</view>
							</view>
						</view>
						<view class="item">
							<view class="item_condition flex_width_42">
								<view class="item_condition_text">参与人数：</view>
								<view class="item_value ex">{{ item.joinUserNum }}</view>
							</view>
							<view class="item_condition">
								<view class="item_condition_text">开奖时间：</view>
								<view class="item_value ex">{{ item.publishTime }}</view>
							</view>
						</view>
						<view class="item">
							<view class="item_condition">
								<view>关联直播：</view>
								<view class="item_value ex">{{ item.liveName || '无' }}</view>
							</view>
						</view>
						<view class="item_btn">
							<view @click="currentItem(item)">更多 </view>
							<view class="right_btn">
								<view v-if="item.status == 1 && !(item.cjTime && item.cjTime > 0)" @click="goCreate(item, 'edit')">编辑</view>
								<!-- && item.prizeSwitch == 1 -->
								<view 
								  v-if="item.status == 1 "
								  class="primary_btn" 
								   :class="(item.cjTime && item.cjTime > 0) ? 'open': ''"
								  @click='openPrize(item,index)'>
									{{item.cjTime?'开奖中':'立即开奖'}}
									<span v-if='item.cjTime'>({{item.cjTime}})</span>
								</view>
								<view class="img_btn" @click="winningRecords(item)" v-if="item.status == 2">
									<img src="@/static/image/lottery.png"/>
									<text>中奖名单</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<div class="listSpace" v-if="lotteryList.length <= 0">
					<list-space></list-space>
				</div>
				<view class="cj_space"></view>
			</scroll-view>
		</view>
		<view class="footer">
		    <u-button type="primary" color="#295FFF" shape="circle" @click="goCreate({}, 'new')">添加抽奖</u-button>
		</view>
		<u-popup :show="isShowMore" round="10" @close="isShowMore = false" mode="bottom">
			<view class="pop-container">
				<view class="avatar-pop-box">
					<view class="pop-item" @click="goCreate(selectedItem, 'copy')">
						复制
					</view>
					<view v-if="(selectedItem.status == 1 && selectedItem.joinUserNum == 0) 
					         || (selectedItem.status == 2 && selectedItem.prizeUserNum === 0)" 
							class="pop-item"  @click="deletePrize(selectedItem)">
						删除
					</view>
				</view>
				<view class="pop-cancel-item" @click="isShowMore = false">
					取消
				</view>
			</view>
		</u-popup>
		<u-popup :show="isShowPop" round="12" @close="closeWriteOffPopup" mode="center">
			<view class="modal">
				<view class="modal-header">
					<text class="title">核销</text>
					<u-icon class="close-icon"  name="close" size="20" @click="closeWriteOffPopup"></u-icon>
				</view>
				<view class="modal-body">
					<view v-if="writeOffSuccess" class="success">
						<img src="@/static/image/success.png" />
						<text>{{ checkCode }}已成功核销！</text>
					</view>
					<view v-else class="form_list">
						<view class="label">请输入兑换核销码</view>
						<view class='labelBox'> 
						    <input v-model="checkCode" type="number"  height='20' maxlength='10' count placeholder="请输入兑换核销码" placeholder-class="placeholder_input" class="middle_input"></input>
						</view>
						<view class="error_tips">{{ errorTips }}</view>
					</view>
				</view>
				<view class="modal-footer">
					<u-button class="btn cancel_btn" color="#295EFF" :plain="true" type="primary" @click="closeWriteOffPopup">取消</u-button>
					<u-button class="btn" color="#295EFF" :disabled="checkCode.length!==10? true:false"  type="primary" @click="writeOff">
						{{ writeOffSuccess ? '继续核销' : '核销' }}
					</u-button>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
export default {
	filters: {
		formatStatus(v) {
			// 抽奖状态
			var s = ''
			switch (v) {
				case 1:
					s = '进行中'
					break;
				case 2:
					s = '已结束'
					break;
			}
			return s
		},
		cyType(v) {
			//参与条件
			var s = ''
			switch (v) {
				case 1:
					s = '评论口令'
					break;
				case 2:
					s = '购买直播间商品'
					break;
				case 3:
					s = '邀请用户'
					break;
				case 4:
					s = '观看时长'
					break;
			}
			return s
		}
	},
	data () {
		return {
			tabs: [
			    { name: '全部' },
			    { name: '进行中' },
				{ name: '已结束' }
			],
			isShowMore: false,
			isShowPop:false,
			writeOffSuccess: false,
			selectedItem: {},
			errorTips: '',
			checkCode: '',
			activeStyle: {
				color: '#464C5B',
				fontSize: '28rpx',
				fontWeight: 500,
			},
			inactiveStyle: {
				color: '#657180',
				fontSize: '28rpx',
				fontWeight: 400,
			},
			itemStyle: 'height: 34px;',
			lotteryList: [],
			total: 0,
			params: {
				name: '',
				page: 1,
				pageSize: 10,
				notBind: 0,
				status: 0
			}
		}
	},
	onLoad() {
		// 获取抽奖列表
		this.getPrize()
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.lotteryList = []
		this.getPrize()
	},
    methods: {
		appFinish() {
			this.$utils.appFinish(this)
		},
        goBack() {
            uni.navigateBack();
        },
		goCreate(item,sign) {
			this.isShowMore = false
			if (sign === 'edit') {
				uni.navigateTo({
					url:`/pages/lottery/sweepstakes?id=${item.drawActivityId}&sign=${sign}`
				})
			} else if (sign === 'copy') {
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定复制该活动的详情吗？',
				// 	success: async (res) => {
				// 		if (res.confirm) {
				// 			uni.navigateTo({
				// 				url:`/pages/lottery/sweepstakes?id=${item.drawActivityId}&sign=${sign}`
				// 			})
				// 		}
				// 	}
				// })
				uni.navigateTo({
								url:`/pages/lottery/sweepstakes?id=${item.drawActivityId}&sign=${sign}`
							})
			} else {
				uni.navigateTo({
					url:`/pages/lottery/sweepstakes?sign=${sign}`
				})
			}
		},
		winningRecords(item) {
			uni.navigateTo({
				url:`/pages/lottery/winningRecords?id=${item.drawActivityId}&checkType=${item.checkType}&name=${item.name}`
			})
		},
		changeTab(item) {
			this.params.status = item.index
			this.params.page = 1
			this.lotteryList = []
			this.getPrize()
		},
		currentItem(item) {
			this.selectedItem = item
			this.isShowMore = true
		},
		search() {
			this.params.page = 1
			this.lotteryList = []
			this.getPrize()
		},
		closeWriteOffPopup() {
			this.isShowPop = false
			this.writeOffSuccess = false
			this.errorTips = ''
			this.checkCode = ''
		},
		async writeOff() {
			if (this.writeOffSuccess) {
				this.writeOffSuccess = false
				this.errorTips = ''
				this.checkCode = ''
				return
			}
		   const { data } = await this.$request(this.$Api.checkWinPrize, {
				checkCode: this.checkCode
			}, "POST",{},false)
			if (data.code !== 200) {
				this.errorTips = data.msg
			} else {
				this.writeOffSuccess = true
				this.errorTips = ''
			}
		},
		// 开奖
		openPrize(ite, idx) {
			if (!ite.liveName) {
				return uni.showToast({
							title: '请先关联直播间！',
							icon: 'none'
						})
			}
			uni.showModal({
				title: '提示',
				content: '点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？',
				success: async (res) => {
					if (res.confirm) {
						const {
							data
						} = await this.$request(this.$Api.drawHandle, {
							drawActivityId: ite.drawActivityId
						}, "POST")
						if (data.code !== 200) return
						// 执行倒计时
						this.openTime(idx)
					}
				}
			})
		},
		openTime(idx) {
			var time = 10
			this.$set(this.lotteryList[idx], 'cjTime', 10)
			var timer = setInterval((res) => {
				time--
				this.$set(this.lotteryList[idx], 'cjTime', time)
				if (time <= 0) {
					clearInterval(timer)
					this.params.page = 1
					this.lotteryList = []
					this.getPrize()
				}
			}, 1000)
		},
		deletePrize(item) {
			this.isShowMore = false
			uni.showModal({
				title: '提示',
				content: '删除后不可恢复，不可查看活动信息，是否要删除活动？',
				success: async (res) => {
					if (res.confirm) {
						const {
							data
						} = await this.$request(this.$Api.deleteActivity, {
							drawActivityId: this.selectedItem.drawActivityId
						}, "POST")
						if (data.code !== 200) return
						uni.showToast({
							title: '删除成功！',
							icon: 'none'
						})
						this.params.page = 1
						this.lotteryList = []
						this.getPrize()
					}
				}
			})
		},
		// 滚动到底部加载更多
		scrolltolower(e) {
			if (this.lotteryList.length < this.total) {
				this.params.page++
				this.getPrize()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
		},
		async getPrize() {
			const { data } = await this.$request(this.$Api.drawList, this.params, "get")
			if(data.code!=200)return
			if(!data.data.list) return
			this.lotteryList = this.lotteryList.concat(data.data.list)
			this.total = data.total
			uni.stopPullDownRefresh()
		}
    }
}
</script>

<style lang="scss" scoped>

.container {
   position: relative;
   height: 100vh;
   overflow-y: hidden;
   background: url('@/static/image/my_set_bg.png') no-repeat center center;
   background-size: cover;
//    background: #F6F9FF;
   .form_list{
	.label{
          margin-bottom: 32rpx;
	}
	.labelBox{
		border: 2rpx solid #D7D7D7;
		width: 500rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #D7D7D7;
		padding: 0 16rpx;
	}
   }
   ::v-deep .u-navbar__content__left__text{
   	font-weight: 500;
   	font-size: 32rpx;
   }
   ::v-deep .u-navbar__content__right{
	   padding-right: 32rpx;
	   .right_btn{
	   	   display: flex;
	   	   justify-content: center;
	   	   align-items: center;
	   	   height: 48rpx;
	   	   box-sizing: border-box;
	   	   font-weight: 400;
	   	   font-size: 24rpx;
	   	   color: #295EFF;
	   	   padding: 0 18rpx;
	   	   border-radius: 24rpx;
	   	   border: 2rpx solid #295EFF;
	   	   img{
	   		   width: 28rpx;
	   		   height: 28rpx;
	   		   margin-right: 10rpx;
	   	   }
	   }
   }
   .content{
	    display: flex;
		flex-direction: column;
		margin-top: 96rpx;
		height: calc(100vh - 96rpx);
		box-sizing: border-box;
		.top_search{
			margin: 0 32rpx;
		}
		.custom_tab{
			margin-top: 10rpx;
			::v-deep .u-tabs__wrapper__nav{
				border-bottom: 2rpx solid #E3E8EE;
				.u-tabs__wrapper__nav__line{
					bottom: 0;
				}
			}
		}
		.content_scroll_view{
			height: calc(100vh - 350rpx);
			.content_scroll_view_space{
				padding-top: 24rpx;
			}
		
			.item_list {
				background: #ffffff;
				border-radius: 14rpx;
				margin:0 32rpx 24rpx 32rpx;
				
				.item_top{
					display: flex;
					align-items: center;
					padding: 16rpx 24rpx;
					border-bottom: 2rpx solid #D7DDE4;
					.item_status{
						width: 104rpx;
						height: 46rpx;
						line-height: 46rpx;
						text-align: center;
						background: #00C795;
						border-radius: 8rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.finish{
						background: #BFBFBF;
					}
					.item_title{
						font-weight: 500;
						font-size: 28rpx;
						color: #464C5B;
						margin-left: 16rpx;
					}
				}
				.item_bottom{
					box-sizing: border-box;
					padding-bottom: 24rpx;
					.item{
						display: flex;
						align-items: center;
						height: 40rpx;
						margin-top: 22rpx;
						padding: 0 24rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						color: #8C8C8C;
						.item_condition{
							flex: 1;
							display: flex;
							align-items: center;
							.item_condition_text{
								min-width: 120rpx;
							}
							.item_value{
								flex: 1;
								color:#464C5B;
							}
						}
						.flex_width_42{
							flex: none;
							width: 45%;
						}
					}
					.item_btn{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 24rpx;
						box-sizing: border-box;
						font-weight: 400;
						font-size: 24rpx;
						color: #295EFF;
						margin-top:22rpx;
						img{
							width: 28rpx;
							height: 28rpx;
						}
						.right_btn{
							display: flex;
							align-items: center;
							.primary_btn{
								width: 160rpx;
								height: 48rpx;
								background: #295EFF;
								border-radius: 8rpx;
								color: #fff;
								font-size: 24rpx;
								line-height: 48rpx;
								text-align: center;
								border-radius: 46rpx;
								margin-left:32rpx;
							}
							.open{
								background: #94AFFF;
								pointer-events: none;
							}
							.img_btn{
								display: flex;
								align-items: center;
								text{
									margin-left: 6rpx;
								}
							}
						}
					}
				}
			}
				
		}
   }
   .footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 166rpx;
		box-sizing: border-box;
		padding: 20rpx 40rpx 66rpx 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210,210,210,0.5);
		display: flex;
		align-items: center;
   }
   .cj_space{
	   width: 100%;
	   height: 40rpx;
   }
   .pop-container {
   		font-size: 34rpx;
   		color: #000000;
   		text-align: center;
   		background-color: #ffffff;
   		border-radius: 24rpx 24rpx 0 0;
   		.pop-item {
   			padding: 32rpx 0;
   			border-bottom: 2rpx solid #F2F2F2;
   			&:last-of-type{
   				border-bottom: 16rpx solid #F2F2F2;
   			}
   		}
   		.pop-cancel-item {
   			background-color: #FFFFFF;
   			padding: 32rpx 0;
   			margin-top: 16rpx;
   		}
   }
   .modal {
   		width: calc(100vw - 100rpx);
   		box-sizing: border-box;
   		background-color: #fff;
   		border-radius: 10px;
   		padding: 32rpx 0;
   		// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   		position: relative;
   		.modal-header {
   			display: flex;
   			justify-content: center;
   			align-items: center;
   			margin-bottom: 20px;
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.close-icon {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}
   		}
   		.modal-body {
   			width: 100%;
			padding: 0 54rpx;
			.placeholder_input{
				color: #D7D7D7;
			}
			.middle_input{
				margin: 16rpx 0 8rpx 0;
			}
			// .input_border{
			// 	width: 100%;
			// 	text-align: right;
			// }
			.success{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 50rpx;
				img{
					width: 106rpx;
					height: 106rpx;
				}
				text{
					font-size: 28rpx;
					color: #464C5B;
					line-height: 40rpx;
				}
			}
			.error_tips{
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #FF5A5F;
				margin-top: 8rpx;
				margin-bottom: 36rpx;
			}
   		}
   		.modal-footer {
   			display: flex;
			gap: 36rpx;
   			justify-content: space-between;
			padding: 0 32rpx;
   			margin-top: 12rpx;
			.btn{
				width: 300rpx;
				height: 76rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
			}
			.cancel_btn{
				background-color: transparent;
			}
   		}
   		
   }
}
</style>

